<template>
	<view class="login-layout">
		<my-header background-color="transparent"></my-header>
		<my-content class="content">
			<view class="title">
				<view class="header_title">
					<image class="logo" src="https://www.dingxians.cn/upload/20240801/66ab8876c911d.png"></image>
				</view>
				<view class="header_remark">
					<image class="welcome" src="https://www.dingxians.cn/upload/20240718/6698c1a987e59.png"
						mode="widthFix"></image>
				</view>
			</view>
			<view class="login_box">
				<view class="login_item">
					<image class="login-icon" src="/static/images/user/icon-phone.png" mode="aspectFit"></image>
					<input maxlength="11" class="login_item_input" type="number" v-model="loginParams.mobile"
						placeholder="请输入手机号" />
				</view>
				<view class="login_item">
					<image class="login-icon" src="/static/images/user/icon-pwd.png" mode="aspectFit"></image>
					<input maxlength="6" class="login_item_input" v-model="loginParams.code" type="number"
						placeholder="请输入验证码" />
					<view class="code" @click="sendCode()" v-if="sendStatus">获取验证码</view>
					<view class="code" v-else style="color: white">{{ time }}</view>
				</view>
			</view>
			<view class="login_btn" @click="login()">登录</view>
			<!-- <view class="login_btn un_complete" v-else></view> -->
			<view class="agree_box">
				<image mode="heightFix" @click="changeAgree()" v-if="agreeStatus" class="agree_icon"
					src="https://www.dingxians.cn/upload/images/common/selected.png"></image>
				<image mode="heightFix" @click="changeAgree()" v-else class="agree_icon"
					src="https://www.dingxians.cn/upload/images/common/unselected.png"></image>
				<view class="agree_title">
					我已阅读并同意
					<text class="agree_text" @click="header('/packageB/content/user')">《用户协议》</text>
					<text class="agree_text" @click="header('/packageB/content/privacy')">《隐私协议》</text>
				</view>
			</view>
		</my-content>
	</view>
</template>

<script>
	import api from '../../api/index.js'

	export default {
		data() {
			return {
				loginParams: {
					mobile: '',
					code: '',
					market: '',
					wx_code: '',
				},
				pass: false,
				agreeStatus: false,
				sendStatus: true,
				time: 60,
				timer: null,
			}
		},
		onLoad(option) {},
		onShow() {
			this.getMarket()
		},
		computed: {
			complete() {
				return this.loginParams.mobile && this.loginParams.code
			},
		},

		methods: {
			back() {
				uni.navigateBack()
			},
			getMarket() {
				let ua = uni.getSystemInfoSync().platform
				if (/ios/i.test(ua)) {
					this.loginParams.market = 'ios'
				} else if (/android/i.test(ua)) {
					this.loginParams.market = 'android'
				}
			},
			changeAgree() {
				this.agreeStatus = !this.agreeStatus
			},
			login() {
				if (!this.agreeStatus) {
					this.show('请先阅读并同意用户协议，隐私协议')
					return
				}
				if (!this.loginParams.mobile) {
					this.show('请输入手机号')
					return
				}
				if (!this.loginParams.code) {
					this.show('请输入验证码')
					return
				}
				var reg = /^1\d{10}$/
				if (!reg.test(this.loginParams.mobile)) {
					this.show('手机号格式错误')
					return false
				}

				uni.showLoading({
					title: '登录中',
				})
				// #ifdef MP-WEIXIN
				uni
					.login({
						onlyAuthorize: true
					})
					.then((res) => {
						console.log(res)
						// 微信登录code
						this.loginParams.wx_code = res.code
						this.loginParams.market = 'wx'
						this.handleLogin()
					})
					.catch((err) => {
						this.show(err)
					})
				// #endif
				// #ifndef MP-WEIXIN
				this.handleLogin()
				// #endif
			},
			handleLogin() {
				api.users
					.login(this.loginParams)
					.then((res) => {
						console.log(res)
						if (res.code === 200) {
							uni.hideLoading()
							this.show('登录成功')
							uni.setStorageSync('token', res.data.token)
							uni.setStorageSync('lower', '1')
							uni.setStorageSync('user_id', res.data.user_id)
							uni.setStorageSync('avatar', res.data.avatar)
							uni.setStorageSync('nickname', res.data.nickname)
							uni.setStorageSync('mobile', res.data.mobile)

							uni.switchTab({
								url: '/pages/index/index',
							})
						}
					})
					.catch((error) => {
						console.log(error)
					})
			},
			sendCode() {
				if (!this.agreeStatus) {
					this.show('请先阅读并同意用户协议，隐私协议')
					return
				}
				if (!this.loginParams.mobile) {
					this.show('请输入您的手机号')
					return
				}
				var reg = /^1\d{10}$/
				if (!reg.test(this.loginParams.mobile)) {
					this.show('手机号格式错误')
					return false
				}
				/*if (!this.pass) {
				  this.verifyFasong()
				  return
				}*/
				uni.showLoading({
					title: '验证码发送中',
				})
				if (this.timer) {
					clearInterval(this.timer)
				}
				this.sendStatus = false
				this.timer = setInterval(() => {
					this.time--
					if (this.time === 0) {
						clearInterval(this.timer)
						this.time = 60
						this.sendStatus = true
					}
				}, 1000)
				api.common
					.sendCode(this.loginParams)
					.then((res) => {
						uni.hideLoading()
						if (res.code === 200) {
							this.show('短信发送成功')
						}
					})
					.catch((error) => {
						console.log(error)
					})
			},
			/* 校验结果回调函数 */
			verifyResult(res) {
				if (res) {
					this.$refs.verifyElement.reset() //校验成功重置插件
					this.pass = true
					this.sendCode()
				}
			},
			/* 显示校验弹窗 */
			verifyFasong() {
				this.$refs.verifyElement.show()
			},
			/* 校验插件重置 */
			verifyReset() {
				this.$refs.verifyElement.reset()
			},
		},
	}
</script>

<style lang="scss" scoped>
	/deep/.my-content {
		padding: 0 !important;
	}

	.login-layout {
		background-image: url('https://www.dingxians.cn/upload/20240731/66a9d6bc189f5.jpg');
		background-size: 100% 100%;
		height: 100vh;
	}

	.header {
		height: 500rpx;
		background-color: #ded000;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		// align-items: center;
		font-size: 48rpx;
		font-weight: bold;
		color: #fff;

		.header_back {
			width: 65rpx;
			height: 65rpx;
			margin-left: 40rpx;
			margin-top: 80rpx;
		}

		.header_content {
			display: flex;
			flex-direction: column;
			justify-content: center;
			margin-bottom: 80rpx;

			.header_title {
				margin-bottom: 20rpx;
				margin-left: 40rpx;
			}

			.header_remark {
				margin-left: 40rpx;
			}
		}
	}

	.title {
		margin-top: 200rpx;
		font-size: 50rpx;
		color: white;
		text-align: center;

		.logo {
			width: 216rpx;
			height: 216rpx;
			border-radius: 20rpx;

		}

		.welcome {
			width: 510rpx;
			height: 74rpx;
			margin-top: 40rpx;
		}
	}

	.login_box {
		display: flex;
		flex-direction: column;
		margin: 30rpx 60rpx 0 60rpx;

		.login_item {
			// height: 120rpx;
			// line-height: 120rpx;
			height: 108rpx;
			line-height: 108rpx;
			color: white;
			display: flex;
			align-items: center;
			position: relative;
			margin-bottom: 56rpx;
			padding: 0 32rpx;
			/* padding-bottom: 20rpx; */
			background: rgba(134, 182, 255, 0.19);
			border-radius: 70rpx 70rpx 70rpx 70rpx;

			.login-icon {
				width: 50rpx;
				height: 50rpx;
			}

			&:last-child {
				margin-bottom: 76rpx;
			}

			.login_item_text {
				font-size: 34rpx;
				margin-right: 40rpx;
				color: #000;
				font-weight: bold;
			}

			.login_item_input {
				font-size: 34rpx;
				margin-left: 10rpx;

				&::placeholder {
					color: #808080;
					font-size: 32rpx;
				}
			}

			.code {
				font-size: 30rpx;
				color: #fff;
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				right: 40rpx;
			}
		}
	}

	.agree_box {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		margin: 56rpx 0 20rpx 0;
		color: white;

		.agree_icon {
			height: 30rpx;
			margin-right: 10rpx;
		}

		.agree_title {
			display: flex;
			align-items: center;
			justify-content: center;

			.agree_text {
				color: #1d82c8;
			}
		}
	}

	.login_btn {
		/* background-color: @color; */
		width: 530rpx;
		height: 130rpx;
		margin: 40rpx auto 10rpx;

		// background-color: #333;
		background-size: 100% 100%;
		text-align: center;
		line-height: 130rpx;
		color: #fff;
		font-size: 40rpx;
		border: 1rpx solid #ccc;
		border-radius: 25rpx;
		background: rgba(134, 182, 255, 0.19);


		&.un_complete {
			filter: grayscale(1);
		}
	}
</style>